<template>
	<view>
		<view class="status_bar">
		    <!-- 这里是状态栏 -->
		</view>
		<view class="task_swiper_wrapper">
			<swiper class="task_swiper"  :indicator-dots="false" :autoplay="true" :circular="true" :interval="2000" :duration="800">
				<swiper-item v-for="(item,key) in bannerList" :key="key">
					<!-- <disable-click>
						
					</disable-click> -->
					<view class="task_swiper_item" @tap="checkBanner(item)">
						<image :src="item.img_path" alt=""/>
					</view>
				</swiper-item>
			</swiper>
			<view class="custom_bar flexRow">
				<view class="custom_bar_center">{{notice}}</view>
				<navigator open-type="switchTab" url="/pages/message/message"  class="custom_bar_right flexCol">
					<view class="iconfont icon-kefu"></view>
					<text>客服</text>
				</navigator>
			</view>
		</view>
	<!-- 	<view class="task_course flexRow">
			<view class="course_item flexCol">
				<image src="/static/img/task1.png" mode=""></image>
				<text>赚钱方法</text>
			</view>
			<view class="course_item flexCol">
				<image src="/static/img/task2.png" mode=""></image>
				<text>投票秘籍</text>
			</view>
			<view class="course_item flexCol">
				<image src="/static/img/task3.png" mode=""></image>
				<text>关注教程</text>
			</view>
		</view> -->
		
		<!-- <view class="massege_box flexRow">
			<image class="mag_icon" src="/static/img/msg_icon.png" mode=""></image>
			<view class="massege_text">
				P ooom看抖抖视频获得了9999积分！快来围观
			</view>
		</view> -->
		<view class="task_label flexRow">
			<image src="/static/img/task_lable.png"></image>
			<view >强烈推荐</view>
		</view>
		<view class="notice_box">
			<swiper class="notice_swiper"  :indicator-dots="false" :autoplay="true" :vertical="true" :circular="true" :interval="2000" :duration="1000">
				<swiper-item v-for="(item,key) in noticeList" :key="key">
					<view class="massege_box flexRow">
						<image class="mag_icon" src="/static/img/msg_icon.png" mode=""></image>
						<view class="massege_text">
							{{item.nickname}}完成{{item.task_name}}获得了{{item.num}}积分，快来围观
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="recommend" >
			<view class="recommend_item flexRow" v-for="(item,key) in taskList" :key="key">
				<image class="recommend_item_icon" :src="item.icon_http_url" mode=""></image>
				<view class="recommend_item_main">
					<view class="task_name">{{item.task_name}}</view>
					<view class="award">
							<text style="padding-right: 20rpx;">999任务</text> <text>可获得1000积分</text>
					</view>
				</view>
				<view class="recommend_item_btn" @tap="toGetTask(item)">
					去领任务
				</view>
			</view>
		</view>
		
		<!-- <view class="hot_task">
			<view class="task_label flexRow">
				<image src="/static/img/task_lable.png"></image>
				<view >热门任务</view>
			</view>
			<view class="hot_tItem flexRow">
				<image class="hot_tItem_icon" src="/static/img/hot_task.png" mode=""></image>
				<view class="hot_tItem_main">
					<view class="hot_tItem_name">暂无任务</view>
					<view class="hot_tItem_award flexRow">
							<image src="/static/img/integral.png"></image> <text>可获得1000积分</text>
					</view>
				</view>
				<view class="recommend_item_btn btn_disable" @tap="clearLocal">
					去领任务
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import request from '../../apiRequest/request.js'
	import utils from '../../utils/utils.js'
	export default {
		data() {
			return {
				taskList:[],
				bannerList: [],
				noticeList: [],
				notice: ''
			}
		},
		onShow() {
			request.taskTypeList().then(res=>{
				console.log(res)
				this.taskList = res.data.list
				this.notice = res.data.notice
				this.bannerList = res.data.bannerList
				this.noticeList = res.data.noticeList
			}).catch(err=>{
				this.$unexpected(err)
			})
		},
		methods: {
			checkBanner:utils.throttle(function (item) {
				if(item.type == 0){
					return
				}
				if(item.type == 2){
					uni.navigateTo({
						url: '/pages/noticeDetail/noticeDetail?id='+item.urls
					})
					return
				}
				if(item.type == 1){
					// do something
					plus.runtime.openURL(item.urls, function(err){
						console.log(err)
					} );
					return
				}
			}, 2000),
			toGetTask:utils.throttle(function (item) {
				uni.setStorageSync('currentTask', item)
				uni.navigateTo({
					url: '/pages/taskList/taskList?taskID='+item.id
				})
			}, 2000),
			toPage(url){
				uni.navigateTo({
					url
				})
			},
			launchApp(){
				plus.runtime.openURL("snssdk1128://user/profile/86134965662", function(res) {  
				
				})
			},
			clearLocal(){
				uni.clearStorageSync();
			},
			wxLogin(){
				uni.clearStorageSync();
				let that = this;
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    // console.log(loginRes);
					// that.loginMain =  JSON.stringify(loginRes);
					uni.getUserInfo({
					  provider: 'weixin',
					  success: function (infoRes) {
						console.log('用户昵称为：' + JSON.stringify(infoRes));
					  },
					  fail:function(err){
					  	uni.showToast({
					  		title: '用户拒绝授权',
					  		icon: 'none',
					  		duration: 3000
					  	})
					  }
					});
				  }
				  
				});
			}
		}
	}
</script>

<style>
page{
	width: 100%;
	box-sizing: border-box;
	/* background:rgba(248,248,248,1); */
}
.status_bar{
	background-color: #FFFFFF;
	position: fixed;
	top: 0;
}
.custom_bar{
	width: 100%;
	position: fixed;
	top: var(--status-bar-height);
}
.custom_bar_right .icon-kefu{
	color:rgba(255,255,255,1);
}
.custom_bar_right text{
	color:rgba(255,255,255,1);
}
.custom_bar_center{
	height:60rpx;
	line-height: 60rpx;
	overflow: hidden;
	background:rgba(255,238,187,0.8);
	border-radius:30rpx;
	margin-left: 20rpx;
	font-size:25rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,109,30,1);
	padding-left: 90rpx;
}
.task_swiper_wrapper{
	position: relative;
}
.task_swiper{
	width: 100%;
	height: 276rpx;
}
.task_swiper_item{
	width: 100%;
	height: 100%;
}
.task_swiper_item>image{
	width: 100%;
	height: 100%;
}
.task_course{
	padding: 40rpx 80rpx;
	justify-content: space-between;
	background:rgba(255,255,255,1);
	margin-bottom: 20rpx;
}
.course_item{
	align-items: center;
	justify-content: center;
}
.course_item>image{
	width: 92rpx;
	height: 92rpx;
}
.course_item>text{
	font-size:25rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(116,120,124,1);
}
.recommend{
	background:rgba(255,255,255,1);
	padding: 0 20rpx;
	padding-bottom: 10rpx;
}
.recommend_item{
	padding: 30rpx 40rpx;
	background:rgba(255,255,255,1);
	box-shadow:0 2rpx 14rpx 0 rgba(172,172,172,0.6);
	border-radius:10rpx;
	align-items: center;
	margin-bottom: 30rpx;
}
.recommend_item_main{
	flex: 1;
	padding-left: 20rpx;
}
.recommend_item_icon{
	width: 80rpx;
	height: 80rpx;
}
.recommend_item_btn{
	width:180rpx;
	height:60rpx;
	line-height: 60rpx;
	background:linear-gradient(0deg,rgba(4,137,255,1),rgba(145,202,255,1));
	border-radius:10rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	text-align: center;
}
.task_name{
	font-size:28rpx;
	line-height: 28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(51,51,51,1);
	margin-bottom: 10rpx;
}
.award{
	font-size:22rpx;
	line-height: 22rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(116,120,124,1);
	opacity:0.99;
}
.hot_task{
	background:rgba(255,255,255,1);
	padding: 0 20rpx;
	padding-bottom: 40rpx;
}
.hot_tItem{
	align-items: center;
	margin-top: 30rpx;
	padding-left: 10rpx;
	padding-right: 40rpx;
}
.hot_tItem_main{
	flex: 1;
	padding-left: 20rpx;
	
}
.hot_tItem_icon{
	width: 80rpx;
	height: 80rpx;
}
.hot_tItem_name{
	font-size:28rpx;
	line-height: 28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(51,51,51,1);
	margin-bottom: 10rpx;
}
.hot_tItem_award{
	font-size:22rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,202,26,1);
	opacity:0.99;
	align-items: flex-end;
}
.hot_tItem_award>image{
	width: 30rpx;
	height: 30rpx;
	margin-right: 10rpx;
}
.btn_disable{
	background: #C0C0C0;
}
.massege_box{
	width:100%;
	height:60rpx;
	background:rgba(255,247,222,1);
	align-items: center;
	padding-left: 40rpx;
	box-sizing: border-box;
}
.mag_icon{
	width: 32rpx;
	height: 32rpx;
	display: block;
	margin-right: 16rpx;
}
.massege_text{
	felx: 1;
	font-size:25rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(255,109,30,1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 600rpx;
}
.notice_swiper{
	height:60rpx;
}
.notice_box{
	margin-bottom: 40rpx;
}
.task_label{
	padding-left: 20rpx;
}
</style>
